<template>
    <div class="col-xs-12" >
        <div v-if="!loading" class="conditionMenu">
            <div class="app clearfix center-block">
                <div class="app-preview">
                    <div class="app-header"></div>
                    <div class="app-content">
                        <div class="inner">
                            <div class="title">
                                <h1><span>自定义菜单</span></h1>
                            </div>
                        </div>
                        <div class="nav-menu">
                            <div class="js-quickmenu nav-menu-wx clearfix"
                                 v-bind:class="changeClass(group.button.length)">
                                <ul class="nav-group designer-x">
                                    <li class="nav-group-item js-sortable" v-for="but in group.button"
                                        v-bind:class="activeItem == but ? 'active' : ''">
                                        <input type="hidden" data-role="parent"/>
                                        <a href="javascript:void(0);" title="拖动排序" v-on:click="editBut('', but)">
                                            <i class="fa fa-minus-circle" v-show="but.sub_button.length > 0"></i>
                                            {{but.name}}
                                        </a>
                                        <dl class="designer-y">
                                            <dd v-for="subBut in but.sub_button"
                                                v-bind:class="activeItem == subBut ? 'active' : ''">
                                                <input type="hidden" data-role="sub"/>
                                                <a href="javascript:void(0)"
                                                   v-on:click="editBut(subBut, but)">{{subBut.name}}</a>
                                            </dd>
                                            <dd v-if="but.sub_button.length < 5" class="js-not-sortable">
                                                <a href="javascript:void(0)" v-on:click="addSubBut(but)"><i
                                                        class="fa fa-plus"></i></a>
                                            </dd>
                                        </dl>
                                    </li>
                                    <li class="nav-group-item js-not-sortable" v-if="group.button.length < 3"
                                        v-show="!group.disabled">
                                        <a href="javascript:void(0);" v-on:click="addBut()" class="text-success">
                                            <i class="fa fa-plus"></i> 添加菜单
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="app-side">
                    <div class="menu app-conditionMenu-edit">
                        <div class="arrow-left"></div>
                        <div class="inner">
                            <div class="panel panel-default">
                                <div class="panel-body form-horizontal">
                                    <div class="card" v-if="group.button.length > 0">
                                        <div class="btns">
                                            <a href="javascript:;" v-on:click="removeBut(activeItem, activeType)"><i
                                                    class="fa fa-times"></i></a>
                                        </div>
                                        <div class="nav-region">
                                            <div class="first-nav">
                                                <h3>菜单设置</h3>
                                                <div class="alert">
                                                    <div class="form-group">
                                                        <label class="control-label col-xs-2">菜单名称</label>
                                                        <div class="col-xs-10">
                                                            <div class="input-group">
                                                                <input type="text" class="form-control" name="" id="title"
                                                                       v-model="activeItem.name"
                                                                       :disabled="group.disabled"/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group"
                                                         v-if="activeType == 2 ||(activeType == 1 && group.button[activeIndex].sub_button.length == 0)">
                                                        <label class="control-label col-xs-2">菜单动作</label>
                                                        <div class="col-xs-10 menu-action">
                                                        <span>
                                                        <label class="radio-inline">
                                                            <input type="radio" name="ipt" v-model="activeItem.type"
                                                                   value="view" :disabled="group.disabled"> 链接
                                                        </label>
                                                        <label class="radio-inline">
                                                            <input type="radio" name="ipt" v-model="activeItem.type"
                                                                   value="click" :disabled="group.disabled"> 触发关键字
                                                        </label>
                                                        </span>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="ipt" v-model="activeItem.type"
                                                                       value="media_id" :disabled="group.disabled"> 回复素材
                                                            </label>
                                                            <!--<label class="radio-inline">-->
                                                                <!--<input type="radio" name="ipt" v-model="activeItem.type"-->
                                                                       <!--value="view_limited" :disabled="group.disabled"> 跳转图文-->
                                                            <!--</label>-->
                                                            <div v-show="activeItem.type == 'view'">
                                                                <hr/>
                                                                <div class="input-group">
                                                                    <input class="form-control" id="ipt-url" type="text"
                                                                           v-model="activeItem.url"
                                                                           :disabled="group.disabled"/>
                                                                </div>
                                                                <span class="help-block">指定点击此菜单时要跳转的链接（注：链接需加http://）</span>
                                                                <!--<span class="help-block"><strong>注意: 由于接口限制. 如果你没有网页oAuth接口权限, 这里输入链接直接进入微站个人中心时将会有缺陷(有可能获得不到当前访问用户的身份信息. 如果没有oAuth接口权限, 建议你使用图文回复的形式来访问个人中心)</strong></span>-->
                                                            </div>
                                                            <div v-show="activeItem.type == 'media_id' || activeItem.type == 'view_limited'">
                                                                <hr/>
                                                                <div class="input-group">
                                                                    <input class="form-control" type="text"
                                                                           readonly="readonly"
                                                                           v-model="activeItem.media_id"
                                                                           :disabled="group.disabled"/>
                                                                    <div class="input-group-btn">
                                                                        <button class="btn btn-primary" id="media_id"
                                                                                v-on:click="openSelectDialog()"
                                                                                :disabled="group.disabled">
                                                                            <i class="fa fa-external-link"></i> 选择素材
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                                <span class="help-block">公众平台的素材id</span>
                                                            </div>
                                                            <div v-show="activeItem.type =='click'"
                                                                 style="position:relative;">
                                                                <hr/>
                                                                <div class="input-group">
                                                                    <input class="form-control" id="ipt-forward" type="text" v-model="activeItem.key" :disabled="group.disabled"/>
                                                                    <!--<div class="input-group-btn">-->
                                                                    <!--<button class="btn btn-primary" id="search" v-on:click="search()" :disabled="group.disabled"><i class="fa fa-search"></i> 搜索</button>-->
                                                                    <!--</div>-->
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span class="btn btn-primary center-block" style="width: 200px" id="btn-submit" v-on:click="saveData()">保存</span>
                </div>
                <modal v-if="imgSelect"
                       @cancel="closeImgDialog"
                       @ok="saveImgDialog"
                       modal-title="素材选择"
                       elId="picture"
                       model-size="large">

                    <!--<template slot="header">-->
                    <!---->
                    <!--</template>-->
                    <div class="row">
                        <div class="col-lg-12" v-show="!SourceLoading">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="  border-width: 0px;">
                                    <h5>素材列表</h5>

                                    <div class="ibox-tools">
                                        <button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">{{TypeArr[SourceType]}} <span class="caret"></span></button>
                                        <ul class="dropdown-menu m-t-xs">
                                            <li v-for="(item,key) in TypeArr" v-on:click="changType(key)" ><a href="javascript:;">{{item}}</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div  class="ibox-content">
                                    <masonry-table v-show="SourceType==1" :data-source="tableImgList">

                                        <template slot="body"  slot-scope="prop">
                                            <div class="col-md-2">
                                                <div class="ibox">
                                                    <div class="ibox-content product-box"
                                                         v-bind:class="prop.item.id=== SourceSelect?'active':''"
                                                         v-on:click="changeSource(prop.item.id)"
                                                    >
                                                        <div class="product-imitation center-block">
                                                            <img alt="图片" class="img-rounded img-lg center-block"
                                                                 :title="prop.item.imgName" :src="prop.item.imgPath">
                                                        </div>
                                                        <div class="product-desc ">
                                                            <!--<span class="product-price">-->
                                                            <!--{{prop.item.imgName}}-->
                                                            <!--</span>-->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </masonry-table>
                                    <masonry-table v-show="SourceType==2" :data-source="tableSourceList">
                                        <template slot="body"  slot-scope="props">
                                            <div class="col-md-2"  >
                                                <div class="ibox">
                                                    <div class="ibox-content product-box"
                                                         v-bind:class="props.item.id=== SourceSelect?'active':''"
                                                         v-on:click="changeSource(props.item.id)"
                                                    >
                                                        <div class="product-imitation center-block">
                                                            <img alt="图片" class="img-rounded img-lg center-block" :src="urlCheck(props.item.contexts[0].thumb_url)">
                                                        </div>
                                                        <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.contexts[0].title}}
                        </span>
                                                            <!--<small class="text-muted">Category</small>-->
                                                            <!--<a href="javascript:;"  class="product-name"> {{props.item.imgName}}</a>-->
                                                            <!--<div class="small m-t-xs" v-for="(context,key) in props.item.contexts">-->
                                                            <!--<div class="row" v-if="key != 0">-->
                                                            <!--<div class="col-xs-8 ">-->
                                                            <!--<h4 class="content-title" >{{context.title}}</h4>-->
                                                            <!--</div>-->
                                                            <!--<div class="col-xs-4">-->
                                                            <!--<img class="img-responsive" :src="context.thumb_url ">-->
                                                            <!--&lt;!&ndash;<i class="default">缩略图</i>&ndash;&gt;-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                        </div>
                                                        <!--<div class="col-xs-6 col-sm-3 col-md-3 panel-group">-->
                                                        <!--<div class="panel panel-default" v-for="(context,key) in props.item.contexts">-->
                                                        <!--<div class="panel-body" v-if="key == 0">-->
                                                        <!--<div class="img">-->
                                                        <!--<i class="default">封面图片</i>-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<span class="text-left">{{context.title}}</span>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="panel-body" v-if="key != 0">-->
                                                        <!--<div class="text">-->
                                                        <!--<h4>{{context.title}}</h4>-->
                                                        <!--</div>-->
                                                        <!--<div class="img">-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<i class="default">缩略图</i>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="m-t text-righ">-->
                                                        <!--<button type="button" v-on:click="showEditDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-pencil"></i> 更名</button>-->

                                                        <!--<button type="button" v-on:click="showDeleteDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-trash"></i> 删除</button>-->
                                                        <!--</div>-->
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </masonry-table>
                                    <masonry-table v-show="SourceType==3" :data-source="tableVoiceSourceList">
                                        <template slot="body"  slot-scope="props">
                                            <div class="col-md-3"  >
                                                <div class="ibox">
                                                    <div class="ibox-content product-box"
                                                         v-bind:class="props.item.id=== SourceSelect?'active':''"
                                                         v-on:click="changeSource(props.item.id)"
                                                    >
                                                        <div class="product-imitation center-block">
                                                           <i class="fa fa-play-circle" style="width: 80px;height: 80px"></i>
                                                        </div>
                                                        <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.voiceName}}
                        </span>
                                                            <!--<small class="text-muted">Category</small>-->
                                                            <!--<a href="javascript:;"  class="product-name"> {{props.item.imgName}}</a>-->
                                                            <!--<div class="small m-t-xs" v-for="(context,key) in props.item.contexts">-->
                                                            <!--<div class="row" v-if="key != 0">-->
                                                            <!--<div class="col-xs-8 ">-->
                                                            <!--<h4 class="content-title" >{{context.title}}</h4>-->
                                                            <!--</div>-->
                                                            <!--<div class="col-xs-4">-->
                                                            <!--<img class="img-responsive" :src="context.thumb_url ">-->
                                                            <!--&lt;!&ndash;<i class="default">缩略图</i>&ndash;&gt;-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                        </div>
                                                        <!--<div class="col-xs-6 col-sm-3 col-md-3 panel-group">-->
                                                        <!--<div class="panel panel-default" v-for="(context,key) in props.item.contexts">-->
                                                        <!--<div class="panel-body" v-if="key == 0">-->
                                                        <!--<div class="img">-->
                                                        <!--<i class="default">封面图片</i>-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<span class="text-left">{{context.title}}</span>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="panel-body" v-if="key != 0">-->
                                                        <!--<div class="text">-->
                                                        <!--<h4>{{context.title}}</h4>-->
                                                        <!--</div>-->
                                                        <!--<div class="img">-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<i class="default">缩略图</i>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="m-t text-righ">-->
                                                        <!--<button type="button" v-on:click="showEditDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-pencil"></i> 更名</button>-->

                                                        <!--<button type="button" v-on:click="showDeleteDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-trash"></i> 删除</button>-->
                                                        <!--</div>-->
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </masonry-table>
                                    <masonry-table v-show="SourceType==4" :data-source="tableVideoSourceList">
                                        <template slot="body"  slot-scope="props">
                                            <div class="col-md-2"  >
                                                <div class="ibox">
                                                    <div class="ibox-content product-box"
                                                         v-bind:class="props.item.id=== SourceSelect?'active':''"
                                                         v-on:click="changeSource(props.item.id)"
                                                    >
                                                        <div class="product-imitation center-block">
                                                                <video :src="props.item.videoPath"></video>
                                                        </div>
                                                        <div class="product-desc ">
                        <span class="product-price content-title">
                       {{props.item.videoTitle}}
                        </span>
                                                            <!--<small class="text-muted">Category</small>-->
                                                            <!--<a href="javascript:;"  class="product-name"> {{props.item.imgName}}</a>-->
                                                            <!--<div class="small m-t-xs" v-for="(context,key) in props.item.contexts">-->
                                                            <!--<div class="row" v-if="key != 0">-->
                                                            <!--<div class="col-xs-8 ">-->
                                                            <!--<h4 class="content-title" >{{context.title}}</h4>-->
                                                            <!--</div>-->
                                                            <!--<div class="col-xs-4">-->
                                                            <!--<img class="img-responsive" :src="context.thumb_url ">-->
                                                            <!--&lt;!&ndash;<i class="default">缩略图</i>&ndash;&gt;-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                            <!--</div>-->
                                                        </div>
                                                        <!--<div class="col-xs-6 col-sm-3 col-md-3 panel-group">-->
                                                        <!--<div class="panel panel-default" v-for="(context,key) in props.item.contexts">-->
                                                        <!--<div class="panel-body" v-if="key == 0">-->
                                                        <!--<div class="img">-->
                                                        <!--<i class="default">封面图片</i>-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<span class="text-left">{{context.title}}</span>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="panel-body" v-if="key != 0">-->
                                                        <!--<div class="text">-->
                                                        <!--<h4>{{context.title}}</h4>-->
                                                        <!--</div>-->
                                                        <!--<div class="img">-->
                                                        <!--<img :src="context.thumb_url ">-->
                                                        <!--<i class="default">缩略图</i>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--</div>-->
                                                        <!--<div class="m-t text-righ">-->
                                                        <!--<button type="button" v-on:click="showEditDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-pencil"></i> 更名</button>-->

                                                        <!--<button type="button" v-on:click="showDeleteDialog(props.item.id)" class="btn btn-xs btn-outline btn-primary"><i class="fa fa-trash"></i> 删除</button>-->
                                                        <!--</div>-->
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </masonry-table>

                                </div>

                            </div>
                        </div>
                        <div class="col-xs-12" v-show="SourceLoading">
                            <div class="spiner-example" >
                                <div class="sk-spinner sk-spinner-cube-grid">
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </modal>
            </div>

        </div>
        <div class="col-xs-12" v-if="loading">
            <div class="spiner-example" >
                <div class="sk-spinner sk-spinner-cube-grid">
                    <div class="sk-cube"></div>
                    <div class="sk-cube"></div>
                    <div class="sk-cube"></div>
                    <div class="sk-cube"></div>
                    <div class="sk-cube"></div>
                    <div class="sk-cube"></div>
                    <div class="sk-cube"></div>
                    <div class="sk-cube"></div>
                    <div class="sk-cube"></div>
                </div>
            </div>
        </div>
    </div>


</template>

<script>
    export default {
        data: function () {
            return {
                groups: {
                    title: '标题',
                    button: [{
                        name: '菜单名称',
                        type: 'url',
                        url: '',
                        key: '',
                        media_id: '',
                        sub_button: []
                    }],
                    matchrule: {
                        sex: 0,
                        client_platform_type: 0,
                        group_id: -1,
                        country: '',
                        province: '',
                        city: '',
                        language: ''
                    }
                },
                list: this.$listDataSource({
                    url: '/api/WeChat/WeChatImg',
                }),
                SourceList: this.$listDataSource({
                    url: '/api/WeChat/WeChatArt',
                }),
                VoiceList: this.$listDataSource({
                    url: '/api/WeChat/WeChatVoice',
                }),
                VideoList: this.$listDataSource({
                    url: '/api/WeChat/WeChatVideo',
                }),
                activeIndex: 0,
                loading:true,
                SourceLoading:false,
//                activeBut: this.group.button[this.activeIndex],
//                activeItem: this.activeBut,
                activeBut: '',
                activeItem: '',
                activeType: 1,
                imgSelect: false,
                refreshImgList: true,
                refreshSourceList:true,
                refreshVoiceSourceList:true,
                refreshVideoSourceList:true,
                SourceSelect: '',
                SourceType:1,
                TypeArr:{'1':'图片','2':'图文','3':'音频','4':'视频'}
            }
        },
        methods: {
            urlCheck:function (url) {
                if(url){
                    return url
                }else{
                    return 'http://tjise.daxuefun.cn/images/failed.png'
                }
            },
            changType(key){
                this.SourceType=key;
            },
            changeSource(id) {
                this.SourceSelect = id;
            },
            openSelectDialog: function () {
                this.imgSelect = true;
            },
            closeImgDialog: function () {
                if(this.SourceLoading ==false){
                    this.imgSelect = false;
                    this.SourceSelect = '';
                }
            },
            saveImgDialog: function () {
                let self = this;
                self.SourceLoading = true;
                axios.post('wechat/SourceUpload', {
                    'w_id': self.$store.state.on_line_weChat_id,
                    'type':self.SourceType,
                    'id': self.SourceSelect,
                }).then(function (res) {
                    self.SourceLoading = false;
                    console.log(res.data,res.data.media_id);
                    self.activeItem.media_id = res.data.media_id;
                    self.closeImgDialog();
                    toastr.success('添加成功！');
                }).catch(function (res) {
                    self.SourceLoading = false;
                    console.log(res);
                    toastr.error('添加失败');
                })
            },
            saveData: function () {
                //补全数据,无数据也要为空
//                console.log(this.group);
                let self = this;
                this.loading = true;
                axios.post('wechat/new-menu',{'id':this.$store.state.on_line_weChat_id,'menu':JSON.stringify(this.group.button)}).then(function (response) {
                    console.log(response);
                    self.loading = false;
                    toastr.success('修改成功！');
                }).catch(function (error) {
                    console.log(error);
                    self.loading = false;
                    toastr.error('修改失败');
                });
            },
            getOldMenu: function () {
                this.loading = true;
                let self = this;
                //   console.log(this.$store.state.on_line_weChat_id)
                axios.get('wechat/get-menu/' + this.$store.state.on_line_weChat_id).then(function (response) {
                    self.loading = false;
                    self.group.button = response.data;
                    self.activeBut = self.group.button[self.activeIndex];
                    self.activeItem = self.activeBut;
                }).catch(function (error) {
                    self.loading = false;
                    console.log(error);
                });
            },
            editBut: function (subbut, but) {
                this.triggerActiveBut(but);
                if (!subbut) {
                    this.activeItem = but;
                    this.activeType = 1;
                } else {
                    this.activeItem = subbut;
                    this.activeType = 2;
                }
            },

            triggerActiveBut: function (but) {
                let index = $.inArray(but, this.group.button);
                if (index == -1) return false;
                this.activeIndex = index;
//                this.activeBut = this.group.button[this.activeIndex];
//                this.activeItem = this.activeBut;
                this.activeType = 1;
            },
            addBut: function () {
                if (this.group.button.length >= 3) {
                    return;
                }
                this.group.button.push({
                    name: '菜单名称',
                    type: 'view',
                    url: '',
                    key: '',
                    media_id: '',
                    sub_button: []
                });
                let but = this.group.button[this.group.button.length - 1];
                this.triggerActiveBut(but);
            },

            removeBut: function (but, type) {
                if (type == 1) {
                    if (!confirm('将同时删除所有子菜单,是否继续')) {
                        return false;
                    }
                    this.group.button = _.without(this.group.button, but);
                    this.triggerActiveBut(this.group['button'][0]);
                } else {
                    this.group.button[this.activeIndex].sub_button = _.without(this.group.button[this.activeIndex].sub_button, but);
                    this.triggerActiveBut(this.group.button[this.activeIndex]);
                }
            },
            addSubBut: function (but) {
                if (this.group.disabled == 1) {
                    return false;
                }
                this.triggerActiveBut(but);
                if (this.group.button[this.activeIndex].sub_button.length >= 5) {
                    return;
                }
                this.group.button[this.activeIndex].sub_button.push({
                    name: '子菜单名称',
                    type: 'url',
                    url: '',
                    key: '',
                    media_id: ''
                });
                this.activeItem = this.group.button[this.activeIndex].sub_button[this.group.button[this.activeIndex].sub_button.length - 1];
                this.activeType = 2;
            },
            changeClass(num) {
                if (num < 3) {
                    let list = num += 1;
                    return 'has-nav-' + list;
                } else {
                    return 'has-nav-3';
                }

            }
        },
        computed: {
            weChat_id(){
                return this.$store.state.on_line_weChat_id
            },
            group(){
                if(this.$store.state.on_line_weChat_id!=0){

                    this.getOldMenu();
                }
                return this.groups
            },
            tableImgList() {
                if (this.refreshImgList) {
                   // console.log(this.SourceType)
                    this.list.fetch();
                    this.refreshImgList = false;
                }
                return this.list;
            },
            tableSourceList() {
                if (this.refreshSourceList) {
                    // console.log(this.SourceType)
                    this.SourceList.fetch();
                    this.refreshSourceList = false;
                }
                return this.SourceList;
            },
            tableVoiceSourceList() {
                if (this.refreshVoiceSourceList) {
                    // console.log(this.SourceType)
                    this.VoiceList.fetch();
                    this.refreshVoiceSourceList = false;
                }
                return this.VoiceList;
            },
            tableVideoSourceList() {
                if (this.refreshVideoSourceList) {
                    // console.log(this.SourceType)
                    this.VideoList.fetch();
                    this.refreshVideoSourceList = false;
                }
                return this.VideoList;
            },
        },
        created() {
            this.$store.commit('setTitle', '自定义菜单');
            this.getOldMenu();
        }
    }
</script>
<style scoped>
    ul {
        margin-bottom: 0px;
    }

    .app {
        width: 1000px;
        margin: 0 auto;
        margin-top: 30px;
    }
    video{
        width: 100% !important;
        height:80px !important;
    }
    .content-title{
        max-width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .product-imitation{
        padding: 0px;
    }
    .product-desc{
        padding: 0px;

    }
    .grid-item{
        margin:10px;
        width: 17%;
    }
</style>